<template>
	<view class="box" :style="{'--backUrl':backUrl,background:background,'--background':background}">
		<view class="center">
			<view class="navBox">
				<view class="leftImage">
					<image :src="pictureBase64" mode=""></image>
				</view>
				<view class="rightBox">
					<text>字数：{{totalNumber}}</text>
					<text>作者：{{authorName}}</text>
				</view>
			</view>
			<view class="subsection">
				<text :class="{active:item.active}" v-for="(item,index) in subList" :key="item.id"
					@click="select(item)">{{item.text}}</text>
			</view>
			<view class="realcontent">
				<!-- 详情 -->
				<view v-show="currentId==1" class="centerbox">
					<text class="describe">{{novelDescribe}}</text>
				</view>
				<!-- 目录 -->
				<view v-show="currentId==2" class="centerbox">
					<view class="topFixed">
						共{{catalogueList.length}}章
					</view>
					<view class="splitBox">
						<mosowe-invented-list :list="catalogueList" :cacheNum="100">
							<template v-slot:default="slotProps">
								<view class="">
									{{ slotProps.item.title }}-{{slotProps.index}}
								</view>
							</template>
						</mosowe-invented-list>
					</view>
				</view>
				<!-- 评论 -->
				<view v-show="currentId==3" class="centerbox">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="commentBox"
						@scrolltolower="lower" @scroll="scroll">
						<view v-for="(item,index) in commentList" :key="item.id" :id="'hbh'+item.id"
							class="scroll-view-comment">
							<view class="user_image">
								<image :src="item.head_img" mode=""></image>
							</view>
							<view class="user_comment">
								<view class="user_name">
									<text>{{item.user_name}}</text>
								</view>
								<view class="user_content">
									{{item.content}}这里，:expandedKeys 和 :selectedKeys 是用 : 语法绑定的
									prop，它们是 a-directory-tree 组件的 props。这样，你就可以分别绑定 value.expandedKeys
									和 value.selectedKeys 到组件的不同属性上了。

									如果 a-directory-tree 组件实际上是一个 Vue 3 的 Composition API 组件，并且你使用的是
									v-model 语法，那么你可能需要使用 ref 和 computed 来正确地双向绑定数据。请查阅 Vue 3 的
									Composition API 文档以获取更多关于如何使用 ref 和 computed 的信息。
								</view>
								<view class="user_talkTime">
									{{item.create_time}}
								</view>
							</view>
						</view>

					</scroll-view>
					<view class="commentBtn">
						<view class="uni-input">
							<text @click="show=true">有趣评论千千万，要不您也来一条?</text>
						</view>
						<image src="/static/image/smeill.png" mode="" @click="show=true"></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" :show="show" @close="close" @open="open" round="20">
			<view class="pupopForm">
				<view class="popupInput">
					<view class="popupTextArea">
						<textarea adjust-position="false" @blur="bindTextAreaBlur" focus="true"
							placeholder="请发表您的宝贵建议,不超过200字哟" maxlength="200" />
					</view>
					<view class="popupUpLoad">
						<u-upload height="100" :previewFullImage="true" width="100" uploadIcon="photo-fill"
							:fileList="fileList1" :capture="['album']" @afterRead="afterRead"
							@delete="deletePic" name="1" multiple :maxCount="4">
						</u-upload>
					</view>
				</view>
				<view class="popupBtn">
					<view class="imageUpload">
						<image src="/static/image/smeill.png" mode=""></image>
					</view>
					<view class="sendBtn" @click="submitForm">
						发送评论
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fileApi from "@/uni_modules/hbh-fileIo/js_sdk/index.js"
	import {
		app_getNovelCatalogue,
		app_getNovelChapterContent,
		app_getNovelComment,
	} from "@/api/novelDetail/index.js"
	import {
		app_getSearchFindNovels
	} from "@/api/search/index.js"
	export default {
		name: "catalogue",
		props: {
			fileNameId: {
				type: String
			},
			background: {
				type: String,
				default: "#fff"
			},
			readProcessNumebr: {
				type: String
			},
			novel_id: {
				type: String || Number
			}
		},
		created() {
			this.getSearchFindNovels()
			this.getNovelCatalogue()
			this.getNovelComment()
		},
		data() {
			return {
				catalogueList: [], //点击目录的目录
				txtList: [], //获取的被分割的目录文件信息数组
				loadedData: [], //存放已经加载过的下标
				subList: [{
					text: "详情",
					active: false,
					id: 1
				}, {
					text: "目录",
					active: true,
					id: 2
				}, {
					text: "评论",
					active: false,
					id: 3
				}],
				currentId: 2,
				activeChapter: "", //当前阅读章节
				currentIntoView: 1,
				chapterIndex: 0,
				backUrl: "",
				pictureBase64: "",
				novelDescribe: "",
				listFullPath: "",
				listTxtIndex: 0,
				total: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				arrLenth: 0,
				isrefresh: true,
				//
				authorName: "",
				totalNumber: "",
				commentList: [], //评论
				userComment: "", //用户输入评论内容
				show: false,
				fileList1: [],
			};
		},
		computed: {
			totalChapterNumber() {
				return this.catalogueList.length > 0 ? this.catalogueList.length : 0
			},
		},
		watch: {
			background: {
				handler(newVal, oldVal) {
					if (newVal != "#fff") {
						this.backUrl = "url('/static/image/novelDetail/icon_mousewhite.png')"
					} else {
						this.backUrl = "url('/static/image/novelDetail/icon_mouseblack.png')"
					}
				},
				immediate: true
			}
		},
		methods: {
			submitForm() {
				uni.showToast({
					icon: "none",
					title: "已提交"
				})
				this.show = false
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '哈哈哈',
						url: result
					}))
					fileListLen++
					console.log(this[`fileList${event.name}`])
				}
			},
			uploadFilePromise(src) {
				return Promise.resolve("https://cdn.wwads.cn/creatives/gJ9g3HoV0BFEHj0c8g4EXpHyblLM3nhPZXJadnf8.jpg")
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			lower() {

			},
			//获取用户评论信息
			getNovelComment() {
				app_getNovelComment({
					novel_id: this.novel_id,
					pageNum: 1,
					pageSize: 10
				}).then((res) => {
					this.commentList = res.data
				}).catch((err) => {
					this.commentList = []
				})
			},
			//获取小说信息
			getSearchFindNovels() {
				app_getSearchFindNovels({
					novel_id: this.novel_id
				}).then((res) => {
					this.authorName = res.data[0].author
					this.totalNumber = res.data[0].word
					this.novelDescribe = res.data[0].content
					this.pictureBase64 = res.data[0].pic
					// console.log(res.data)
				}).catch((err) => {
					console.log(err)
				})
			},
			//获取章节内容
			getNovelChapterContent() {
				app_getNovelChapterContent({
					chapter_id: this.chapter_id
				}).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.chapterContent = res.data.content
						uni.hideLoading()
					}
				}).catch((err) => {
					console.log(err)
					uni.hideLoading()
				})
			},
			getNovelCatalogue() {
				app_getNovelCatalogue({
					novel_id: "05df881328a9433fb35a8e041cb61d81"
				}).then((res) => {
					// console.log(res, "--------------")
					if (res.code == 200) {
						this.catalogueList = res.data
					}
				}).catch((err) => {
					console.log(err)
					uni.hideLoading()
				})
			},
			//分段器切换
			select(item) {
				this.subList.map(item => item.active = false)
				item.active = true
				this.currentId = item.id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pupopForm {
		height: 700rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 200rpx;
		box-sizing: border-box;

		.popupNavBox {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 25rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}

		.popupInput {
			width: 100%;
			height: 280rpx;
			background-color: #f0f0f0;
			border-radius: 10rpx;
			margin-bottom: 25rpx;

			.popupTextArea {
				height: 150rpx;
				padding: 10rpx 20rpx;
				box-sizing: border-box;

				textarea {
					width: 100%;
					height: 100%;
					// font-size: 20rpx;
				}
			}

			.popupUpLoad {
				height: 150rpx;
				padding: 20rpx 0rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
			}
		}

		.popupBtn {
			height: 100rpx;
			background-color: #f0f0f0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 10rpx;

			.imageUpload {
				image {
					width: 60rpx;
					height: 60rpx;
					margin-left: 20rpx;
				}
			}

			.sendBtn {
				width: 200rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				border-radius: 20rpx;
				background-color: orange;
				color: #fff;
			}
		}
	}

	.box {
		height: 100%;
		// background-color: red;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		padding-bottom: 200rpx;
		box-sizing: border-box;

		.center {
			height: 100%;
			padding-top: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.navBox {
				height: 150rpx;
				// background-color: red;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				display: flex;

				.leftImage {
					width: 130rpx;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.rightBox {
					width: calc(100% - 130rpx);
					height: 100%;
					display: flex;
					flex-direction: column;
					padding: 30rpx;
					box-sizing: border-box;
				}
			}

			.subsection {
				height: 80rpx;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin: 0 20rpx;
					color: #9a9a9a;
					font-weight: bold;
				}

				.active {
					color: #515151;
				}

			}

			.realcontent {
				// flex: 1;使用自撑属性会导致滚动组件无法滚动，是坑
				height: calc(100% - 230rpx);


				.centerbox {
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;

					.commentBtn {
						position: absolute;
						bottom: 0rpx;
						left: 0rpx;
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						padding: 0 30rpx;
						box-sizing: border-box;
						justify-content: space-between;
						background-color: #e3e3e3;

						.uni-input {
							width: calc(100% - 80rpx);
							display: flex;
							align-items: center;
							padding: 0 20rpx;
							box-sizing: border-box;
							border-radius: 10rpx;
							background-color: #dddddd;

							text {
								height: 60rpx;
								line-height: 60rpx;
								color: #595959;
							}
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.commentBox {
						height: 100%;

						padding-bottom: 100rpx;
						box-sizing: border-box;

						.scroll-view-comment {
							display: flex;
							margin-bottom: 20rpx;
							padding: 0 30rpx;
							box-sizing: border-box;

							.user_image {
								width: 60rpx;
								height: 60rpx;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.user_comment {
								width: calc(100% - 60rpx);
								padding-left: 10rpx;
								border-bottom: 1rpx solid #e7e7e7;
								box-sizing: border-box;

								.user_name {
									height: 50rpx;
									display: flex;
									align-items: center;
									margin-bottom: 20rpx;


									text {
										position: relative;
										color: #242424;
										font-size: 24rpx;

										&::after {
											content: "我";
											position: absolute;
											z-index: 2;
											width: 40rpx;
											height: 40rpx;
											text-align: center;
											font-size: 24rpx;
											line-height: 40rpx;
											border-radius: 10rpx;
											right: -60rpx;
											top: calc(50% - 20rpx);
											background-color: #dadada;
										}
									}


								}

								.user_content {
									font-size: 28rpx;
									margin-bottom: 30rpx;
								}

								.user_talkTime {
									color: #bfbfbf;
									font-size: 22rpx;
									margin-bottom: 30rpx;
								}
							}
						}
					}

					.describe {
						padding: 0 30rpx;
						box-sizing: border-box;
						color: #515151;
					}

					.topFixed {
						height: 80rpx;
						padding: 0 30rpx;
						line-height: 80rpx;
						color: #515151;
						border-bottom: .5rpx solid #ccc;
					}

					.splitBox {
						height: calc(100% - 80rpx);
						padding: 0rpx 30rpx;
						box-sizing: border-box;
						position: relative;

						// 滚动条样式
						/deep/ ::-webkit-scrollbar {
							/*滚动条整体样式*/
							width: 20px !important;
							// height: 20px !important;
							overflow: auto !important;
							background: #00aa7f !important;
							-webkit-appearance: auto !important;
							border-radius: 10px !important;
							display: block;
						}

						/deep/ ::-webkit-scrollbar-thumb {
							/*滚动条里面小方块*/
							height: 20px !important; //这个滑块有最小高度改不动
							border-radius: 5px !important;
							// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
							// background: #ff5500 !important;
							background-image: var(--backUrl) !important;
							background-repeat: no-repeat !important;
							background-size: 20px 20px !important;
							background-position: center;
						}

						/deep/ ::-webkit-scrollbar-track {
							/*滚动条里面轨道*/
							// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
							border-radius: 5px !important;
							background: var(--background) !important;
						}

						.scroll-Y {
							height: 100%;

							.scroll-view-item {
								padding: 20rpx 0rpx;
								box-sizing: border-box;
								border-bottom: .5px solid #ccc;
								color: #515151;
								display: flex;
								align-items: center;
								width: 100%;
								position: relative;
								height: 50px;
								font-size: 30rpx;

								text:nth-of-type(1) {
									width: 80%;
									display: flex;
									flex-wrap: wrap;
								}

								.processBox {
									position: absolute;
									bottom: 0rpx;
									right: 0rpx;

									font-size: 20rpx;
								}

							}
						}

						image {
							position: absolute;
							right: 15px;
							width: 20px;
							height: 20px;
							// transition: all .5s initial;
						}
					}

				}


			}
		}
	}
</style>